<template>
	<view class="vaeModalBox" v-if="visible" @click="maskClose">
		<view  @click.stop="closeCon">
			<slot name="modalInner"></slot>
		</view>
		<!-- <uniTransition :mode-class="transitionClass" :show="visible">
			
		</uniTransition> -->
	</view>
</template>
<script>
	import uniTransition from "../uni-transition/uni-transition.vue";
	export default {
		props: {
			// visible: {
			// 	type: Boolean,
			// 	default: false
			// },
			transition:{
				type: Boolean,
				default: false
			},
			mask:{
				type:Boolean,
				default:false,
			}
		},
		data() {
			return {
				transitionClass: ['zoom-in'],
				modalVisible:true,
				visible:false,
			}
		},
		components: {
			uniTransition
		},
		watch:{
			// visible:function(newVal){
			// 	if(this.visible){
			// 		this.modalVisible=true;
			// 	}
			// }
		},
		methods:{
			closeCon(){
				// this.visible=true;
			},
			open(){
				this.visible=true;
			},
			maskClose(){
				if(this.mask){
					this.visible=false;
				}
			},
			close(){
				this.visible=false;
			},
		},
		onLoad() {
		}
		
	}
</script>

<style>
	.vaeModalBox {
		width: 100;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
